<template>
	<div class="orderRoot">
		<title text="我的订单"></title>
		<div class="ctx">
			<div class="selecter">
				<div @click="toCurrent(k)" v-for="(item, k) in swipers" :key="k" class="select"
					:class="k == current ? 'isselect' : ''"> {{ item }}
				</div>
			</div>
			<swiper class="ctxmain" :current="current" @change="change">
				<swiper-item v-for="(item, k) in swipers" :key="k" duration="100">
					<scroll-view class="ctxitem" refresher-enabled="true" scroll-y="true" show-scrollbar="false"
					:refresher-triggered="isRefresh"
					@refresherrefresh="onRefresh()">
						<div v-for="(i, key) in order.data" :key="key">
							<div class="itemBox" v-if="i.orderList.state == k || k == 0">
								<item :d="i"></item>
							</div>
						</div>
					</scroll-view>
				</swiper-item>
			</swiper>
		</div>
	</div>
</template>

<script>
import item from './item.vue'
import { mapState } from 'vuex';
export default {
	name: 'Order',

	data() {
		return {
			current: 0,
			isRefresh:false,
			swipers: ['全部', '待支付', '已支付', '已完成']
		};
	},

	mounted() {

	},
	updated() {
		console.log("订单更新");
	},
	watch: {
		inme(d) {
			if (d) {
				this.$store.dispatch("getOrderDataAll")
			}
		}
	},
	methods: {
		toCurrent(i) {
			this.current = i
		},
		change(d) {
			this.current = d.detail.current
		},
		async onRefresh() {
			if (this.isRefresh) { return }
			this.isRefresh = true
			let timeout = setTimeout(() => {
				this.isRefresh = false
			}, 3000)
			await this.$store.dispatch("getOrderDataAll")
			clearTimeout(timeout)
			this.isRefresh = false
		}
	},
	computed: {
		...mapState(['order'])
	},
	props: {
		inme: {
			default: false,
		}
	},
	components: {
		item
	}
}
</script>

<style lang="scss" scoped>
.orderRoot {
	height: 100%;
}

.ctx {
	height: calc(100% - $uni-nav);
	overflow: hidden;
	background: $uni-bg-color-g;
}

.selecter {

	width: 100%;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: space-around;

	.select {
		width: 60px;
		height: 30px;
		margin: 0px 20px;
		box-sizing: border-box;
		text-align: center;
	}

	.isselect {
		border-bottom: 4px solid $uni-color-primary;
	}
}

.ctxmain {
	height: calc(100% - 30px);
}

.ctxitem {
	height: 100%;
}

.itemBox {
	box-sizing: border-box;
	width: 100%;
	padding: 10px 10px;
}
</style>